<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>

	<head>

		<jsp:include page="inc.jsp"></jsp:include>
		<link href="${ctx}/jslib/Uimaker/css/style.css" rel="stylesheet" type="text/css" />
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			#loginform {
				width: 500px;
				height: 350px;
				position: relative;
				top: 100px;
				/*left:300px;*/
			}
			
			.loginbody {
				width: 709px;
				height: 456px;
				position: relative;
				background:url(${ctx}/image/logininfo.png) no-repeat;
			}
			
			.loginbox {
				width: 499px;
				height: 300px;
				position: absolute;
				left: 0;
				margin-top: 0;
				background-image: none;
			}
			
			#userAndPassword {
				width: 270px;
				height: 125px;
				margin-top: 150px;
				margin-left: 218px;
			}
			
			#userAndPassword li {
				width: 457px;
				height: 56px;
				margin-bottom: 18px;
			}
			
			#userAndPassword li input {
				width: 360px;
				height: 43px;
				line-height: 51px;
				font-size: 14px;
				font-weight: bold;
				border: none;
			}
			
			input:-webkit-autofill {
				-webkit-box-shadow: 0 0 0px 1000px white inset;
				border: none;
			}
			
			.username {
				background:url(${ctx}/image/loginuser.png) no-repeat;
				position: absolute;
				left: 90px;
				top: 188px;
				width: 157px;
				margin-left: 5px;
				margin-top: 5px;
			}
			
			.userpassword {
				background:url(${ctx}/image/loginpassword.png) no-repeat;
				position: absolute;
				left: 94px;
				top: 260px;
				width: 157px;
			}
			
			#loginname {
				background: none;
				margin-left: 5px;
				margin-top: 5px;
			}
			
			#password {
				background: none;
				margin-left: 5px;
				margin-top: 5px;
			}
			
			.rememberpassword {
				width: 317px;
				height: 29px;
				position: absolute;
				left: 94px;
				top: 322px;
			}
			
			#_crepassword {
				position: absolute;
				left: 30px;
				top: -75px;
			}
			
			#btnonclick {
				width: 111px;
				height: 35px;
				position: absolute;
				bottom: 3px;
				left: 216px;
			}
			
			.loginbtn{
				position: absolute;
				bottom: 30px;
				width:200px;
				height:50px;
				background: #3989c8;
				border-radius:3px;
			}
		</style>
		<script src="${ctx}/jslib/Uimaker/js/cloud.js" type="text/javascript"></script>
		<meta http-equiv="X-UA-Compatible" content="edge" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>用户登录</title>
		<script>
			var sessionInfo_userId = '${sessionInfo.id}';
			if(sessionInfo_userId) { //如果登录,直接跳转到index页面
				window.location.href = '${ctx}/admin/index';
			}
			$(function() {
				$("#loginname").focus();
				$('#loginform').css({
					'position': 'absolute',
					'left': ($(window).width() - 709) / 2,
					"top": ($(window).height() - 456) / 2
				});
				$(window).resize(function() {
					$('#loginform').css({
						'position': 'absolute',
						'left': ($(window).width() - 709) / 2,
						"top": ($(window).height() - 456) / 2

					});
				});
			});
			$(function() {
				$(this).bind('keypress', function(event) {
					if(event.keyCode == "13") {
						submitForm();
					}
				});
				$('#loginname').bind('keypress', function(event) {
					if(event.keyCode == "13") {
						submitForm();
					}
				});
				$('#password').bind('keypress', function(event) {
					if(event.keyCode == "13") {
						submitForm();
					}
				});
				$('#loginform').form({
					url: '${ctx}/admin/login',
					onSubmit: function() {
						progressLoad();
						var isValid = checkForm();
						if(!isValid) {
							progressClose();
						}
						return isValid;
					},
					success: function(result) {
						result = $.parseJSON(result);
						progressClose();
						if(result.success) {
							window.location.href = '${ctx}/admin/index';
						} else {
							$.messager.show({
								title: '提示',
								msg: '<div class="light-info"><div class="light-tip icon-tip"></div><div>' + result.msg + '</div></div>',
								showType: 'show'
							});
						}
					}
				});

			});

			function checkForm() {
				var loginname = $("#loginname").val();
				var password = $("#password").val();
				if(loginname == null || loginname == "") {
					$.messager.show({
						title: '提示',
						msg: '<div class="light-info"><div class="light-tip icon-tip"></div><div>请输入用户名</div></div>',
						showType: 'show'
					});
					return false;
				}
				if(password == null || password == "") {
					$.messager.show({
						title: '提示',
						msg: '<div class="light-info"><div class="light-tip icon-tip"></div><div>密码不能为空</div></div>',
						showType: 'show'
					});
					return false;
				}
				return true;
			}
			//			获取cookie值
			function getCookie(key) {
				var keyVals = document.cookie.split("; ");
				for(var i in keyVals) {
					//xxxx=xxxxx
					var kv = keyVals[i].split("=");
					if(kv[0] == key) {
						return kv[1];
					}
				}
				return null;
			};

			function submitForm() {
				var isSave = document.getElementById("rmbUser").checked;
				var username = document.getElementById("loginname").value;
				var pwd = document.getElementById("password").value;
				var d = new Date();
				d.setDate(d.getDate() + 10);
				if(isSave) {
					document.cookie = "username=" + username + ";expires=" + d;
					document.cookie = "pwd=" + pwd + ";expires=" + d;
				};
				$('#loginform').submit();
			};

			function clearForm() {
				$('#loginform').form('clear');
			};

			function GetPwdAndChk() {
				var usr = document.getElementById('loginname').value;
				var pwd = getCookie("pwd");
				if(pwd != null && usr==getCookie("username")) {
					document.getElementById("password").value = pwd;
				} else {
					document.getElementById("password").value= "";
				}
			}; 
		</script>
	</head>

	<body style="background-color:#1c77ac; background-image:url(${ctx}/jslib/Uimaker/images/light.png); background-repeat:no-repeat; background-position:center top; overflow:hidden;">
		<div id="mainBody">
			<div id="cloud1" class="cloud"></div>
			<div id="cloud2" class="cloud"></div>
		</div>

		<form id="loginform" method="post">
			<div class="loginbody">
				<!--<span class="systemlogo"></span>-->
				<div class="loginbox">
					<ul id="userAndPassword">
						<li class="username"><input id="loginname" name="loginname" type="text" class="loginuser" placeholder="用户名" onblur="GetPwdAndChk()"/></li>
						<li class="userpassword"><input id="password" name="password" type="password" class="loginpwd" placeholder="密码" /></li>
						<div class="rememberpassword">
							<input type="checkbox" name="" id="rmbUser" value="" /><span id="_crepassword">记住密码</span>
							<label style="margin-left: 100px"><a href="${ctx}/user/regPage">立即注册</a></label>
						</div>
					</ul>
				</div>

				<div id="btnonclick">
					<input type="button" class="loginbtn" value="登录" onclick="submitForm()"/> 
					</div>

				</div>
		</form>
	</body>

</html>